<
コンテンツ

Flutter の Web サポート

コンテンツ

Flutter の Web サポートは、Web 上でもモバイル上でも同じエクスペリエンスを提供します。 Dart の移植性、Web プラットフォームのパワー、および Flutter フレームワークの柔軟性により、iOS、Android、 とブラウザは同じコードベースからのものです。既存の Flutter コードをコンパイルできます Dart で書かれた Web エクスペリエンスは、まったく同じ Flutter であるため、 フレームワークとウェブは、アプリの単なる別のデバイスターゲットです。

Flutter architecture for web

Flutter に Web サポートを追加するには、Flutter の実装が必要です 標準ブラウザ API 上のコア描画層に加えて、 Dart を ARM マシンコードの代わりに JavaScript にコンパイルします。 モバイルアプリケーションに使用されます。 DOM、Canvas、 と WebAssembly を組み合わせた Flutter は、ポータブルで高品質な、 最新のブラウザ全体でパフォーマンスの高いユーザー エクスペリエンスを実現します。 コア描画層を完全に Dart に実装しました Dart の最適化された JavaScript コンパイラーを使用してコンパイルしました。e Flutter コアとフレームワークとアプリケーション デプロイできる単一の縮小されたソース ファイルにまとめられます。 任意の Web サーバー。

ウェブ上では多くのことができますが、 Flutter の Web サポートは、次のような場合に最も価値があります。 次のシナリオ:

あプログレッシブ Web アプリケーションFlutterで構築
Flutter は、ユーザーの機能と統合された高品質の PWA を提供します。 インストール、オフライン サポート、カスタマイズされた UX を含む環境。
シングルページアプリケーション
Flutter の Web サポートにより、豊富な機能を備えた複雑なスタンドアロン Web アプリが可能になります。 グラフィックスとインタラクティブなコンテンツを使用してエンドユーザーにさまざまな情報を提供します。 デバイス。
既存のモバイルアプリケーション
Flutter の Web サポートは、既存のブラウザベースの配信モデルを提供します。 flutterモバイルアプリ。

現時点では、すべての HTML シナリオが Flutter に最適であるわけではありません。 たとえば、ブログ記事など、テキストが豊富でフローベースの静的なコンテンツ Web が構築されているドキュメント中心のモデルの恩恵を受ける Flutter のような UI フレームワークが提供するアプリ中心のサービスではなく、 配達できます。しかし、あなたはできるFlutterを使用してインタラクティブを埋め込む 経験をこれらの Web サイトに反映します。

モバイル アプリを Web に移行する方法については、次を参照してください。 次のビデオ:

資力

次のリソースは、開始するのに役立ちます。

  • 既存のアプリに Web サポートを追加するか、 Web サポートを含む新しいアプリについては、を参照してください。Flutter を使用した Web アプリケーションの構築
  • Flutter のさまざまな Web レンダラー (HTML および CanvasKit) について詳しくは、以下を参照してください。Webレンダラー
  • レスポンシブな Flutter を作成する方法を学ぶには アプリ、参照レスポンシブなアプリの作成
  • よくある質問とその回答を表示するには、ウェブよくある質問
  • コード例を参照するには、 をチェックしてくださいFlutter の Web サンプル。
  • Flutter Web アプリのデモを見るには、 flutterギャラリー。
  • Web アプリのデプロイについて詳しくは、次を参照してください。Web リリース用のアプリの準備
  • 問題を提出するメインの Flutter リポジトリにあります。
  • でチャットしたり、Web 関連の質問をしたりできます。#ヘルプチャンネルオン不和。